<template>
    <section class="container">
        <div class="continer_cart">
            <header>
                <span class="cart_title">🛒 购物车</span>
                <span class="total">{{totalPrice}}</span>
            </header>
            <div class="cart_container">
                <div v-for="(item,key,index) in cart" :key=index>
                    <span class="cart_remove" @click="REMOVE_PRODUCT(index)">❌</span>
                    <span class="shopping_name">{{item.name}}</span>
                    <span class="shopping_type">{{item.apparent}}，{{item.capacity}}</span>
                    <span class="shopping_number">1</span>
                </div>
            </div>
            <div class="cart_settle">
                <div>结算 ➡️</div>
            </div>
        </div>
    </section>
</template>

<script>
    import {
        mapActions,
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        name: 'cart',
        data() {
            return {}
        },
        created() {
            console.log(this.cart)
        },
        computed: {
            ...mapState(['cart', 'iPhone6S']),
            'totalPrice': function() {
                let totalPrice=0;
                for(let i in this.cart){
                    totalPrice += this.cart[i].price
                }
                return totalPrice
            }
        },
        methods: {
             ...mapMutations(['REMOVE_PRODUCT'])
            // ...mapActions(['removeProduct'])
        }
    }
</script>

<style lang="less" scoped>
    section.container {
        width: 900px;
        margin: auto;
        display: flex;
        padding: 20px;
        .continer_cart {
            width: 100%;
            border: 1px solid #ebccd1;
            border-radius: 10px;
            overflow: hidden;
            header {
                background-color: #f2dede;
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ebccd1;
                span {
                    color: #a94442;
                    font-weight: 600;
                }
            }
            .cart_container {
                padding: 20px 30px;
                font-weight: 600;
                span {
                    font-size: 14px;
                    &.shopping_type {
                        color: #fff;
                        background-color: #5cb85c;
                        font-size: 10px;
                        border-radius: 3px;
                        padding: 2px;
                    }
                    &.shopping_number {
                        color: #fff;
                        background-color: #d9534f;
                        min-width: 18px;
                        padding: 1px 4px;
                        font-size: 12px;
                        display: inline-block;
                        height: 18px;
                        text-align: center;
                        vertical-align: middle;
                        font-weight: 700;
                        border-radius: 10px;
                    }
                    &.cart_remove {
                        cursor: pointer;
                    }
                }
            }
            .cart_settle {
                border-top: 1px solid #ddd;
                padding: 10px 20px;
                background-color: #f5f5f5;
                border-color: #d43f3a;
                div {
                    color: #fff;
                    background-color: #d9534f;
                    border-radius: 10px;
                    overflow: hidden;
                    text-align: center;
                    height: 35px;
                    line-height: 35px;
                }
            }
        }
    }
</style>


